<template>
  <view class="home flex column">
    <u-navbar :title-bold="true" :title="coalMineName ? coalMineName : '通讯录'" back-icon-color="#333" title-color="#000"></u-navbar>
    <!-- 搜索框 -->
    <view class="search" v-if="showSearch">
      <u-search
        placeholder="请输入姓名"
        v-model="searchData.name"
        shape="square"
        bg-color="#E5EAE8"
        height="80"
        :show-action="true"
        :animation="true"
        :input-style="{ marginLeft: '20rpx' }"
        :search-icon="searchSrc"
        placeholder-color="#999999"
        :action-style="{
          color: '#369164',
          fontSize: '14px',
          fontWeight: '400',
        }"
        @search="handleSearch"
        @custom="handleSearch"
        @change="handleSearch"
      ></u-search>
    </view>
    <!-- 列表 -->
    <scroll-view
      :scroll-y="true"
      class="container item one"
      refresher-enabled="true"
      :refresher-triggered="triggered"
      :refresher-threshold="50"
      refresher-background="#F5F5F5"
      @refresherrefresh="onRefresh"
      @refresherpulling="onPulling"
      @refresherrestore="onRestore"
      @refresherabort="onAbort"
      @scrolltolower="onScrollToLower"
    >
      <view class="container-body">
        <template v-if="list && list.length">
          <u-card
            :border="false"
            box-shadow="0px 0px 8px #ddd6d6"
            :body-style="{ padding: '0 30rpx' }"
            :show-head="false"
            v-for="(item, index) in list"
            :key="index"
          >
            <view slot="body">
              <view class="card-row u-flex">
                <u-image width="100rpx" height="100rpx" :src="item.personPhoto ? item.personPhoto : src"></u-image>
                <view class="r-box u-flex-col item one">
                  <view class="box u-flex u-row-between u-p-l-20 u-p-r-20">
                    <text class="t-green f-bold u-font-lg">
                      {{
                      item.peopleName
                      }}
                    </text>
                    <text class="t-light-green">{{ item.headship }}</text>
                  </view>
                  <view class="box u-flex u-p-l-20">
                    <text class="u-m-r-50 t-section">
                      {{
                      item.mobilePhone
                      }}
                    </text>
                    <u-image width="40rpx" @click="callPhone(item.mobilePhone)" height="40rpx" :src="phoneSrc"></u-image>
                  </view>
                </view>
              </view>
            </view>
          </u-card>
          <view class="p-t-10 p-b-10">
            <u-loadmore :status="status" />
          </view>
        </template>
        <template v-if="showEmpty">
          <view class="c-empty p-absolute-center">
            <u-empty text="暂无数据"></u-empty>
          </view>
        </template>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import { BASE_IP, BASE_URL } from '@/utils/ip.js'
export default {
  name: 'index',
  data() {
    return {
      showSearch: false,
      searchData: {
        pageSize: 20,
        pageNumber: 1,
        name: '',
        code: ''
      },
      src: require('@/static/image/phone_head_icon.svg'),
      phoneSrc: require('@/static/image/book_phone_icon.svg'),
      coalMineName: '',
      triggered: false, // 下拉刷新
      showEmpty: false,
      status: 'loading',
      list: [],
      BASE_IP: '',
      BASE_URL: '',
      searchSrc: require('@/static/image/search_icon.svg')
    }
  },
  mounted() {
    ;(this.BASE_URL = BASE_URL), (this.BASE_IP = BASE_IP)
  },
  methods: {
    /**
     * 初始化
     */
    init() {
      this.searchData.pageNumber = 1
      this.status = 'loading'
      this.showEmpty = false
    },
    getNum(data) {
      let title = ''
      if (data.state === 0) {
        title = '正常生产'
      } else if (data.state === 1) {
        title = '异常'
      }
      return title
    },
    //打电话方法
    callPhone(data) {
      uni.makePhoneCall({
        phoneNumber: data // 仅为示例
      })
    },
    /**
     * 请求数据
     */
    async getData() {
      const res = await this.$post('/maillList/people/dataList', this.searchData)
      if (res && res.body.content) {
        this.list = this.searchData.pageNumber === 1 ? res.body.content : this.list.concat(res.body.content)
        for (let i = 0; i < this.list.length; i++) {
          if (this.list[i].personPhoto) {
            // #ifdef  H5
            this.list[i].personPhoto = BASE_IP + BASE_URL + 'system/archives/preview/thumb/' + this.list[i].personPhoto
            // #endif
            // #ifndef H5
            this.list[i].personPhoto = BASE_URL + 'system/archives/preview/thumb/' + this.list[i].personPhoto
            // #endif
          }
        }
        // 到底了
        if (res.body.content.length < this.searchData.pageSize) {
          this.status = 'nomore'
        }
        // 数据空
        if (this.searchData.pageNumber === 1 && this.list && this.list.length === 0) {
          this.showEmpty = true
        } else {
          this.showEmpty = false
        }
      }
    },
    /**
     * 搜索
     */
    handleSearch() {
      if (this.searchTimer) {
        clearTimeout(this.searchTimer)
      }
      this.searchTimer = setTimeout(() => {
        this.getData()
      }, 300)
    },
    /**
     * 上拉加载
     */
    onScrollToLower() {
      if (this.status === 'loading') {
        this.searchData.pageNumber++
        this.getData()
      }
    },
    onPulling(e) {},
    onRefresh() {
      if (this.Isfreshing) return
      this.Isfreshing = true
      if (!this.triggered) {
        // 保证刷新状态下，triggered为true
        this.triggered = true
        this.init()
        this.getData()
        setTimeout(() => {
          this.triggered = false // 触发onRestore，关闭刷新图标
          this.Isfreshing = false
        }, 1200)
      }
    },
    onRestore() {},
    onAbort() {}
  },
  onLoad(options) {
    const { coalMineName, code, type } = options
    this.coalMineName = coalMineName
    this.$set(this.searchData, 'code', code)
    if (type) {
      this.showSearch = true
    }
    this.getData()
  }
}
</script>

<style lang="scss" scoped>
.home {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  /* 搜索框 */
  .search {
    padding: 20rpx 28rpx;
  }
  .card-row {
    height: 140rpx;
    .r-box {
      height: 100%;
      width: 100%;
      .box {
        height: 50%;
      }
    }
  }
}
</style>
